﻿const {message, Button, AutoComplete} = antd;
const Option = AutoComplete.Option;

class Page extends React.Component {
    state = Object.assign(mountData, {
    	result: [],
    });
    success = () => {
	  message.success('This is a message of success');
	};
	
	error = () => {
	  message.error('This is a message of error');
	};
	
	warning = () => {
	  message.warning('This is message of warning');
	};
	
	successLoad = () => {
	  message.loading('Action in progress..', 2.5)
	    .then(() => message.success('Loading finished', 2.5))
	    .then(() => message.info('Loading finished is finished', 2.5));
	};
	
	info = () => {
	  message.info('This is a normal message');
	};
	
	  handleSearch = (value) => {
	    let result;
	    if (!value || value.indexOf('@') >= 0) {
	      result = [];
	    } else {
	      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
	    }
	    this.setState({ result });
	  }
	  
    render() {
	    const { result } = this.state;
	    const children = result.map(email => <Option key={email}>{email}</Option>);
        return (
        	<div style={{marginTop: '50px'}}>
                <Button style={{marginLeft: '30px'}} onClick={this.success}>Success</Button>
			    <Button style={{marginLeft: '30px'}} onClick={this.error}>Error</Button>
			    <Button style={{marginLeft: '30px'}} onClick={this.warning}>Warning</Button>
			    <Button style={{marginLeft: '30px'}} onClick={this.successLoad}>Display a loading indicator</Button>
            	<Button style={{marginLeft: '30px'}} type="primary" onClick={this.info}>Display normal message</Button>
            	<br/><br/>
            	<span style={{marginLeft: '30px'}}>自动补全组件：</span>
            	<AutoComplete
			        style={{ width: 200 }}
			        onSearch={this.handleSearch}
			        placeholder="input here"
			     >
			        {children}
			    </AutoComplete>
            	
            </div>
        );
    }
}